<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view v-if="list.length === 0 && !isAdd">
			<view class="empty" :style="{ 'min-height': h + 'px' }">
				<u-empty text="暂无数据" textColor="#AAAAAA" textSize="32rpx" width="265" height="170" mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
		<view class="has_info" v-else>
			<view class="add_user" @tap="addPerson">
				<image src="@/static/my/commonInformation/icon_add.png" mode=""></image>
				<text>新增</text>
			</view>
			<view class="list">
				<u-swipe-action>
					<u-swipe-action-item :options="options" v-for="(item, index) in list" :key="index" @click="deletePerson(item)"
						:ref="'swipeAction' + index">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content">
								<view class="sac_item">
									<image v-if="!isMy" class="chk" @tap="selectPerson(index)"
										:src="item.isSelect ? 'https://i.ringzle.com/file/20231027/a21562a8f54a4fd094b43eaf8dd42ee6.png' : 'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
									</image>
									<view class="info" :class="isMy ? 'info_my' : ''">
										<view class="name">
											<view>{{ item.passengerNameCopy }}</view>
											<!-- <view>{{typeCfg[item.personType]}}</view> -->
										</view>
										<view class="idcard">
											<text>{{ cardCfg[item.cardType] || '' }}</text>
											<text>{{ item.cardCopy }}</text>
										</view>
									</view>
									<image class="edit" src="@/static/my/commonInformation/icon_edit.png" @tap="toEdit(item)"></image>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		<view class="to_add" v-if="list.length === 0 && !isAdd">
			<view class="ljtj" @tap="isAdd = true">立即添加</view>
		</view>
		<view class="to_add" v-if="!isMy">
			<view class="ljtj" @tap="sure">确定</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'commonInformationIndex',
	data() {
		return {
			titleHeader: '常用信息',
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			h: uni.getSystemInfoSync().windowHeight - 87,
			isAdd: false,
			isMy: false, //是否从我的页面进入
			list: [],
			typeCfg: {
				1: '成人票',
				2: '儿童票',
				3: '免票儿童',
				4: '老人票'
			},
			cardCfg: this.$uct.typeToText,
			options: [{
				text: '删除'
			}]
		}
	},
	onLoad(option) {
		if (option.type && option.type == 'my') this.isMy = true;
		this.getPassengers();
	},
	onShow() {
		this.getPassengers();
	},
	methods: {
		getPassengers() {
			this.$api.get('/api/commonPerson/list', {
				openId: JSON.parse(uni.getStorageSync('userInfo')).openId
			}).then(res => {
				if (res.data.code === 0) {
					this.list = this.$uct.setPersonType(res.data.data);
					if (this.list.length > 0) this.isAdd = true;
					this.list.forEach((d, i) => {
						d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName, 1);
						d.cardCopy = this.$aesTm.tuomin(d.card, 3);
						this.$set(this.list[i], 'isSelect', false);
					})
				} else this.$showModal(res.data.msg);
			})
		},
		toAdd() {
			this.isAdd = true;
		},
		//确定添加
		sure() {

		},
		deletePerson(item) {
			this.$api.del('/api/commonPerson', [item.id]).then(res => {
				if (res.data.code === 0) {
					this.$showToast('删除成功');
					this.list.forEach((d, i) => {
						this.$refs['swipeAction' + i][0].closeHandler();
					})
					this.getPassengers();
				} else this.$showModal(res.data.msg);
			})
		},
		selectPerson(index) {
			this.$set(this.list[index], 'isSelect', !this.list[index].isSelect);
		},
		addPerson() {
			uni.navigateTo({
				url: '/pagesMy/commonInformation/add',
				events: {
					addPassengerSuccess: () => {
						this.getPassengers();
					}
				}
			})
		},
		toEdit(item) {
			uni.navigateTo({
				url: '/pagesMy/commonInformation/add?item=' + JSON.stringify(item),
				events: {
					editPassengerSuccess: () => {
						this.getPassengers();
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.page {
	background: #F5F8FA;
	position: relative;
	padding-bottom: 200rpx;
	// padding-top: 120rpx;

	.has_info {
		overflow: hidden;

		.add_user {
			width: calc(100% - 48rpx);
			height: 88rpx;
			// border-radius: 16rpx;
			margin: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #007A69;
				line-height: 45rpx;
				margin-left: 10rpx;
				letter-spacing: 2rpx;
			}
		}

		.sac_item {
			display: flex;
			align-items: center;
			padding: 36rpx 24rpx;

			.chk {
				width: 38rpx;
				height: 38rpx;
			}

			.info {
				width: calc(100% - 96rpx);
				padding-left: 22rpx;

				&.info_my {
					width: 100%;
					padding-left: 0;
				}

				.name {
					display: flex;
					align-items: center;

					view:first-child {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
						line-height: 32rpx;
					}

					// view:last-child {
					// 	padding: 0 8rpx;
					// 	height: 36rpx;
					// 	line-height: 36rpx;
					// 	text-align: center;
					// 	background: #F5F8FA;
					// 	border-radius: 8rpx;
					// 	font-size: 24rpx;
					// 	font-family: PingFangSC-Regular, PingFang SC;
					// 	font-weight: 400;
					// 	color: #94A9C8;
					// 	margin: 5rpx 0 0 28rpx;
					// }
				}

				.idcard {
					margin-top: 20rpx;

					&>text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						line-height: 24rpx;

						&:first-child {
							color: #AAAAAA;
							margin-right: 10rpx;
						}
					}
				}
			}

			.edit {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.empty {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.to_add {
		width: 100%;
		height: 174rpx;
		position: fixed;
		bottom: 0;
		background: #fff;

		.ljtj {
			width: calc(100% - 40rpx);
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			border-radius: 46rpx;
			background: #007A69;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 16rpx 0 0 20rpx;
		}
	}
}
</style>
<style>
.u-swipe-action-item__right__button__wrapper {
	background: #F55454 !important;
	font-size: 32rpx;
	font-family: PingFang-SC-Bold, PingFang-SC;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 2rpx;
}
</style>